<template>
  <div>
    <div v-if="this.$route.name == 'edition'" class="app-container">
      <vue-element-loading
        :active="this.$store.state.elementloading.vueElementLoading"
        spinner="spinner"
        color="#FF6700"
      />
      <el-card shadow="never">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchMap"
          style="margin-top: 20px;margin-left: 0px"
        >
          <el-form-item prop="eTime">
            <el-input v-model="searchMap.eTime">
              <template slot="prepend">归档时间</template>
            </el-input>
          </el-form-item>
          <el-button @click="fetchData" icon="el-icon-search"></el-button>
        </el-form>
        <el-button-group style="margin-bottom:20px">
          <el-button v-if="btnshow('edition-add')" @click="openNew" size="small" type="primary" icon="el-icon-plus"></el-button>
          <el-button v-if="btnshow('edition-update')" @click="handleEdit(radio)" size="small" type="primary" icon="el-icon-edit"></el-button>
          <el-button
            v-if="btnshow('edition-delete')"
            @click="deleteEdition(radio)"
            size="small"
            type="primary"
            icon="el-icon-delete"
          ></el-button>
        </el-button-group>

        <!-- 数据列表
    :data 绑定渲染的数据
    border 表格边框
        -->
        <vue-element-loading
          :active="this.$store.state.elementloading.vueElementLoading"
          spinner="spinner"
          color="#FF6700"
        />
        <el-table
          @row-click="chooseone"
          :data="list"
          border
          style="width: 100%"
          max-height="500"
          highlight-current-row
          @current-change="handleSelectionChange"
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
          <el-table-column align="center" prop="eTime" label="归档时间" width="500"></el-table-column>
          <el-table-column align="center" prop="eSetterName" label="归档人" width="300"></el-table-column>
          <el-table-column align="center" prop="eNote" label="备注"></el-table-column>
          <el-table-column align="center" prop="handle" label="操作">
            <template slot-scope="scope">
              <el-button @click="toEditionContent(scope.row)" size="mini" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>

      <!-- 编辑归档弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="closeDialog"
        v-dialogDrag
        :title="title"
        :visible.sync="editdataDialog"
        width="40%"
      >
        <el-form ref="editForm" :model="pojo" label-width="60px" label-position="right">
          <el-form-item label="备注：" prop="eNote">
            <el-input type="textarea" rows="4" v-model="pojo.eNote" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button @click="addData" type="primary">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <router-view />
  </div>
</template>

<script>
import uuidv4 from "uuid/v4";
import { mapGetters } from "vuex";
import VueElementLoading from "vue-element-loading";
import editionApi from "@/api/edition";
import { hasPermissionPoint } from "@/utils/permission";

export default {
  components: {
    VueElementLoading
  },
  data() {
    return {
      list: [],
      total: 0, //总记录数
      currentPage: 1, //当前页码
      pageSize: 10, // 每页显示10条数据
      radio: null, // 如果使用单选框，定义一个model值
      currentSelectItem: {}, //当前选中的值
      searchMap: {
        eTime: ""
      },
      pojo: {
        id: "",
        eTime: "",
        eSetterId: "",
        tFileEditionId: "",
        eTime: ""
      },
      backup: {},
      editdataDialog: false,
      isEdit: false,
      title: "",
      timer: ""
    };
  },

  created() {
    // 初始化获取列表数据
    this.fetchData();
  },

  computed: {
    ...mapGetters(["userid"])
  },

  watch: {
    $route(to, from) {
      this.fetchData();
    }
  },

  methods: {
    btnshow(point) {
      return hasPermissionPoint(point);
    },
    handleSelectionChange(row) {
      console.log(row);
      this.currentSelectItem = row;
    },
    chooseone(row) {
      this.radio = row.id;
      this.backup = this.pojo = row;
    },
    // openDevices(row) {
    //   this.$router.push({
    //     path: "/device"
    //   });
    // },
    // 当每页显示条数改变后，被触发，val是最新的显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后，被触发，val是最新的页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 调用分页查询
      var vm = this.$store;
      vm.commit("updateLoading", true);
      console.log(
        "是否开启加载",
        this.$store.state.elementloading.vueElementLoading
      );
      editionApi
        .selectList(this.searchMap.eTime, this.currentPage, this.pageSize)
        .then(resp => {
          this.list = resp.data.rows;
          this.total = resp.data.total;
          if (resp.data) {
            vm.commit("updateLoading", false);
            console.log(
              "是否开启加载",
              this.$store.state.elementloading.vueElementLoading
            );
          }
        });
    },

    // 跳转到选中的归档版本
    toEditionContent(row) {
      // this.radio = row.id;
      this.chooseone(row);
      localStorage.setItem("eTime", row.eTime);
      localStorage.setItem("imgPath", row.tFileEditionId);
      console.log("++++++++++++", row.tFileEditionId);
      this.$router.push({
        name: "editionContent"
      });
    },

    // 弹窗
    // 打开新增弹窗
    openNew() {
      this.isEdit = false;
      this.openDialog(this.isEdit);
    },
    // 打开修改弹窗
    handleEdit(id) {
      if (id != null && id != "") {
        this.isEdit = true; // 切换为修改状态
        this.openDialog(this.isEdit);
        // this.fpojo
      } else {
        this.$message({
          message: "请选择需要修改的归档哦！",
          type: "warning"
        });
      }
    },

    handleDialogClose() {
      this.editdataDialog = false;
    },

    // 关闭编辑弹窗，并将值赋为空
    closeDialog() {
      this.editdataDialog = false;
      this.pojo = {
        eNote: ""
      };
      this.radio = "";
      this.fetchData();
    },
    // 打开弹窗
    openDialog(e) {
      if (e) {
        this.pojo = this.backup;
        this.title = "修改归档";
      } else {
        console.log("userid:", this.userid);
        this.title = "新增归档";
        this.pojo = {
          eNote: ""
        };
      }
      this.editdataDialog = true;
      // 清除校验规则
      // this.$nextTick(() => {
      //   this.$refs["editForm"].clearValidate();
      // });
    },

    // 提交表单
    addData() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            // 修改
            editionApi.update(this.pojo).then(resp => {
              if (resp.data.code == 0) {
                //修改成功
                this.$message({
                  message: "修改归档信息成功",
                  type: "success"
                });
                // 关闭
                this.closeDialog();
                // 刷新数据
              } else {
                // 失败
                this.$message({
                  message: "修改归档信息失败",
                  type: "warning"
                });
              }
            });
          } else {
            this.pojo.eSetterId = this.userid;
            this.pojo.tFileEditionId = uuidv4().replace(/-/g, "");
            editionApi.insert(this.pojo).then(resp => {
              if (resp.data.code == 0) {
                //新增成功
                this.$message({
                  message: "新增归档信息成功",
                  type: "success"
                });
                // 关闭
                this.closeDialog();
              } else {
                // 失败
                this.$message({
                  message: "新增归档信息失败",
                  type: "warning"
                });
              }
            });
          }
        } else {
          this.$message({
            message: "提交表单失败",
            type: "warning"
          });
          return false;
        }
      });
    },

    // 删除归档
    deleteEdition(id) {
      if (id != null && id != "") {
        this.$confirm("此操作将永久删除该归档信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            editionApi.delete(this.pojo).then(resp => {
              if (resp.data.code == 0) {
                this.$message({
                  message: "删除归档信息成功",
                  type: "success"
                });
                this.fetchData();
                this.radio = "";
              } else {
                this.$message({
                  message: "删除归档信息失败",
                  type: "warning"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          message: "请选择需要删除的归档哦！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="css" scoped>
/* .el-table >>> th {
  background-color: #eee;
} */
.el-table >>> td {
  font-size: 13px;
}
</style>